<template>
    <div :class="hoverable ? 'item hoverable' : 'item'" @click="openDetailPage(app.id)">
        <div class="left">
            <img :class="app.top != undefined && app.top > 0 ? 'app-icon' : 'app-icon-right'" :src="app.icon">
        </div>
        <div class="leader" v-if="app.top != undefined && app.top > 0">
            <div class="app-top">
                <span>{{app.top}}</span>
            </div>
        </div>
        <div class="center">
            <div id="top">
                <span class="app-name">{{app.name}}</span>
            </div>
            <div id="center">
                <el-rate class="rate" :value="parseFloat(app.star)" disabled></el-rate>
                <span class="app-category">{{app.category}}</span>
            </div>
            <div id="bottom">
                <span class="app-recommend">{{app.recommend}}</span>
            </div>
        </div>
        <div class="right">
            <el-button class="btn" size="small" round>下载</el-button>
        </div>
    </div>
</template>

<script>
let _this = null
export default {
    name: 'AppDetailCard',
    props: {
        app: {
            type: Object,
            default: () => {
                return {}
            }
        },
        hoverable: {
            type: Boolean,
            default: true
        }
    },
    created() {
        _this = this
    },
    methods: {
        openDetailPage: (e) => {
            document.documentElement.scrollTop = 0
            _this.$router.push({
                name: 'AppDetail',
                params: {
                    id: e
                }
            }, () => {
                location.reload()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    width: 456px;
    cursor: pointer;
    align-items: center;
    margin-top: 10px;

    .left {
        .app-icon {
            width: 72px;
            height: 72px;
            border-radius: 12px;
        }

        .app-icon-right {
            width: 72px;
            height: 72px;
            border-radius: 12px;
            margin-right: 24px;
        }
    }

    .leader {
        width: 45px;
        min-width: 45px;
        height: 100%;
        text-align: center;
        padding-top: 20px;

        .app-top {
            font-size: 16px;
            font-weight: 700;
        }
    }

    .center {
        width: 288px;
        height: 87px;
        border-bottom: 1px solid #f2f2f2;
        padding: 5px;

        #top {
            border-bottom: none;
            padding: 0;
            margin-top: 4px;

            .app-name {
                margin-bottom: 5px;
                font-size: 16px;
                text-align: center;
            }
        }

        #center {
            border-bottom: none;
            padding: 0;
            display: flex;
            height: 13px;

            .app-category {
                font-size: 13px;
                color: #6d6d6d;
            }

            .rate {
                width: 60px;
                height: 13px;
                margin-right: 4px;

                :deep(.el-rate__item) {
                    width: 12px;
                    height: 12px;
                }

                :deep(.el-rate__icon) {
                    margin-top: -2px;
                    margin-left: -1px;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
        }

        #bottom {
            border-bottom: none;
            margin: 0;
            padding: 0;

            .app-recommend {
                padding: 4px 0;
                max-width: 250px;
                height: 16px;
                font-size: 13px;
                color: #6d6d6d;
                display: block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }

    .right {
        padding: 5px;
        height: 87px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .btn {
            background-color: rgba(0,0,0,.05);
            color: #007dff;
            border: none;
            border-radius: 14px;
            font-weight: bold;
            width: auto;
            min-width: 72px;
            height: 28px;
        }

        .btn:hover {
            background-color: rgba(0,0,0,.03);
        }
    }
}

.hoverable:hover {
    background-color: rgba(#000, 0.05);
}
</style>